
// @media #{$medium-and-up} {
//     .container {
//         width: 85%;
//     }
// }
// @media #{$large-and-up} {
//     .container {
//         width: 70%;
//     }
// }
.container .row {
    margin-left: (-1 * $gutter-width / 2);
    margin-right: (-1 * $gutter-width / 2);
}

.section {
    padding-top: 1rem;
    padding-bottom: 1rem;
    &.no-pad {
        padding: 0;
    }
    &.no-pad-bot {
        padding-bottom: 0;
    }
    &.no-pad-top {
        padding-top: 0;
    }
}

// Mixins to eliminate code repitition
@mixin reset-offset {
    margin-left: auto;
    left: auto;
    right: auto;
}

@mixin grid-classes($size, $i, $perc) {
    &.offset-#{$size}#{$i} {
        margin-left: $perc;
    }
    &.pull-#{$size}#{$i} {
        right: $perc;
    }
    &.push-#{$size}#{$i} {
        left: $perc;
    }
}

.row {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px; // Clear floating children
    &:after {
        content: "";
        display: table;
        clear: both;
    }
    .col {
        float: left;
        box-sizing: border-box;
        padding: 0 $gutter-width / 2;
        min-height: 1px;
        &[class*="push-"],
        &[class*="pull-"] {
            position: relative;
        }
        $i: 1;
        @while $i <=$num-cols {
            $perc: unquote((100 / ($num-cols / $i)) + "%");
            &.s#{$i} {
                width: $perc;
                @include reset-offset;
            }
            $i: $i+1;
        }
        $i: 1;
        @while $i <=$num-cols {
            $perc: unquote((100 / ($num-cols / $i)) + "%");
            @include grid-classes("s", $i, $perc);
            $i: $i + 1;
        }
        @media #{$medium-and-up} {
            $i: 1;
            @while $i <=$num-cols {
                $perc: unquote((100 / ($num-cols / $i)) + "%");
                &.m#{$i} {
                    width: $perc;
                    @include reset-offset;
                }
                $i: $i+1;
            }
            $i: 1;
            @while $i <=$num-cols {
                $perc: unquote((100 / ($num-cols / $i)) + "%");
                @include grid-classes("m", $i, $perc);
                $i: $i + 1;
            }
        }
        @media #{$large-and-up} {
            $i: 1;
            @while $i <=$num-cols {
                $perc: unquote((100 / ($num-cols / $i)) + "%");
                &.l#{$i} {
                    width: $perc;
                    @include reset-offset;
                }
                $i: $i+1;
            }
            $i: 1;
            @while $i <=$num-cols {
                $perc: unquote((100 / ($num-cols / $i)) + "%");
                @include grid-classes("l", $i, $perc);
                $i: $i + 1;
            }
        }
        @media #{$extra-large-and-up} {
            $i: 1;
            @while $i <=$num-cols {
                $perc: unquote((100 / ($num-cols / $i)) + "%");
                &.xl#{$i} {
                    width: $perc;
                    @include reset-offset;
                }
                $i: $i+1;
            }
            $i: 1;
            @while $i <=$num-cols {
                $perc: unquote((100 / ($num-cols / $i)) + "%");
                @include grid-classes("xl", $i, $perc);
                $i: $i + 1;
            }
        }
    }
}